GamePage - Code Metrics - Inspection of "Game page styling.." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/game-reports ( 4b0bd0...63548e )

by Kevin Van

created 2021-03-12 11:34 UTC

GamePage A

↳ Parent: Project

Complexity

Total Complexity

Size/Duplication

Total Lines	266
Duplicated Lines	0 %

Importance

Changes

Metric	Value
wmc	26
eloc	218
dl	0
loc	266
rs	10
c	0
b	0
f	0

import React, { Component } from "react"
import LazyLoad from "react-lazy-load"

import { graphql } from "gatsby"

import moment from "moment"
import "moment/locale/nl-be"

import { mapPsdStatus } from "../scripts/helper"

import Layout from "../layouts/index"
import SEO from "../components/seo"
import Icon from "../components/icon"

import iconBench from "../images/i_bench_2.png"
import iconCardRed from "../images/i_card_red.png"
import iconCardYellowRed from "../images/i_card_yellow_red.png"
import iconCardYellow from "../images/i_card_yellow.png"
import iconGoal from "../images/i_goal.png"
import iconStart from "../images/i_start.png"
import iconSubIn from "../images/i_sub_in.png"
import iconSubOut from "../images/i_sub_out.png"

class GamePage extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: [],
      loading: true,
    }

    const {
      data: {
        site: {
          siteMetadata: { kcvvPsdApi, refreshRate },
        },
      },
    } = this.props

    this.kcvvPsdApi = kcvvPsdApi
    this.apiRefreshRate = refreshRate
    this.timeout = {}
    this.matchId = this.props.id || null
  }

  updateData() {
    const apiUrl = `${this.kcvvPsdApi}/match/${this.matchId}`

    fetch(apiUrl)
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading: false }))
  }

  componentDidMount() {
    this.updateData()
  }

  render() {
    moment.locale("nl-be")

    if (this.state.loading === false && this.state.data) {
      const {
        general = {},
        substitutes = {},
        lineup = {},
        events = [],
      } = this.state.data
      const homeTeamId = general.homeClub.id
      const ogImage = {
        src: general?.homeClub.logo,
        width: 180,
        height: 180,
      }

      const { home: homeLineup = [], away: awayLineup = [] } = lineup || {}
      const { home: homeSubs = [], away: awaySubs = [] } = substitutes || {}

      const matchTime = moment(general.date)

      return (
        <Layout>
          <SEO
            lang="nl-BE"
            title={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
            description={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
            path={`/game/${general?.id}`}
            image={ogImage}
          />
          {/* <header className="full">
            <div className={"bg-green-mask bg-green-mask--minimal"}>
              <div className={"bg-white-end"} />
            </div>
          </header> */}

          <section className="grid-container game-stats">
            <div className="grid-x grid-margin-x">
              <div className={"cell large-12 center game__details"}>
                <div className="game__teams">
                  <div className={"game__teams-inner"}>
                    <LazyLoad debounce={false}>
                      <img
                        src={general.homeClub.logo}
                        alt={general.homeClub.name}
                      />
                    </LazyLoad>
                  </div>
                  {this.renderScore(general.goalsHomeTeam, general.goalsAwayTeam)}
                  <div className={"game__teams-inner"}>
                    <LazyLoad debounce={false}>
                      <img
                        src={general.awayClub.logo}
                        alt={general.awayClub.name}
                      />
                    </LazyLoad>
                  </div>
                </div>
                <h1>{`${general.homeClub.name} - ${general.awayClub.name}`}</h1>
                <h4>{general.competitionType}</h4>
                <time dateTime={matchTime.format("YYYY-MM-DD - H:mm")}>
                  {matchTime.format("dddd DD MMMM YYYY - H:mm")}
                </time>
                <br />
                {general.status !== 0 && mapPsdStatus(general.status)}
                <br />
              </div>

              {(homeLineup.length !== 0 || awayLineup.length !== 0) && (
                <div
                  className={
                    "lineup__wrapper grid-x grid-margin-x cell large-12"
                  }
                >
                  <div className={"cell large-6 lineup__wrapper--home"}>
                    <h3>{general.homeClub.name}</h3>
                    {homeLineup && this.renderLineup(homeLineup, homeSubs)}
                  </div>
                  <div className={"cell large-6 lineup__wrapper--away"}>
                    <h3>{general.awayClub.name}</h3>
                    {awayLineup && this.renderLineup(awayLineup, awaySubs)}
                  </div>
                </div>
              )}

              {events.length !== 0 && (
                <div className={"cell large-12 event__wrapper"}>
                  <h3>Gebeurtenissen</h3>
                  {events && this.renderEvents(events, homeTeamId)}
                </div>
              )}
            </div>
          </section>
        </Layout>
      )
    } else {
      return (
        <Layout>
          <section className="grid-container site-content">
            Matchverslag inladen...
          </section>
        </Layout>
      )
    }
  }

  renderScore = (resultHome, resultAway) => {
    return  resultHome !== null && resultAway !== null ? (
      <div className={"match-details__vs match-details__vs--score"}>
        {this.renderScoreWithWinnerIndicator(resultHome, resultAway, "home")}
        <span className={"match-details__divider"}> - </span>
        {this.renderScoreWithWinnerIndicator(resultAway, resultHome, "away")}
      </div>
    ) : (
      <div className={"match-details__vs"}>VS</div>
    )
  }

  renderScoreWithWinnerIndicator = (result1, result2, extraClass) => {
    return result1 > result2 ? (
      <span
        className={`match-details__winner match-details__winner--${extraClass}`}
      >
        {result1}
      </span>
    ) : (
      <span className={"match-details__loser"}>{result1}</span>
    )
  }

  renderEvents(events, homeTeamId) {
    return (
      <>
        {events.map((element, i) =>
          this.renderEventLine(i, element, homeTeamId)
        )}
      </>
    )
  }

  renderEventLine(i, element, homeTeamId) {
    const homeTeam = element.clubId == homeTeamId
    let actionIcon = null
    let actionText = ""

    switch (element.action) {
      case "geel":
        actionIcon = iconCardYellow
        actionText = "Gele kaart voor"
        break
      case "rood":
        actionIcon = iconCardRed
        actionText = "Rode kaart voor"
        break
      case "tweedegeel":
        actionIcon = iconCardYellowRed
        actionText = "Tweede gele kaart voor"
        break
      case "doelpunt":
        actionIcon = iconGoal
        actionText = `${element?.goalsHome} - ${element?.goalsAway} — Doelpunt gescoord door`
        break
    }

    return (
      <div
        className={`event__row ${
          homeTeam ? "event__row--home" : "event__row--away"
        } grid-x grid-margin-x`}
        key={i}
      >
        {homeTeam && (
          <span
            className={
              "event__row__item event__row__item--home lineup__item--name cell small-10 large-4"
            }
          >
            {actionText} {element.playerName}
          </span>
        )}
        {homeTeam && (
          <span
            className={
              "event__row__item event__row__item--home lineup__item--action cell small-1 center"
            }
            style={{ backgroundImage: `url(${actionIcon})` }}
          ></span>
        )}
        <span
          className={
            "event__row__item lineup__item--time cell small-1 large-2 center"
          }
        >
          {element.minute}'
        </span>
        {homeTeam || (
          <span
            className={
              "event__row__item event__row__item--away lineup__item--action cell small-1 center"
            }
            style={{ backgroundImage: `url(${actionIcon})` }}
          ></span>
        )}
        {homeTeam || (
          <span
            className={
              "event__row__item event__row__item--away lineup__item--name cell small-10 large-4"
            }
          >
            {actionText} {element.playerName}
          </span>
        )}
      </div>
    )
  }
  renderLineup(lineup, substitutes) {
    return (
      <>
        {this.renderLineupHeader()}
        {lineup.map((element, i) => this.renderLineupLine(i, element))}
        <hr />
        {substitutes.map((element, i) => this.renderSubLine(i, element))}
      </>
    )
  }

  renderLineupHeader() {
    return (
      <div className={"lineup__header grid-x grid-margin-x"}>
        <span
          className={"lineup__header__item lineup__item--status cell small-1"}
        ></span>
        <span
          className={"lineup__header__item lineup__item--number cell small-1"}
        >
          #
        </span>
        <span
          className={"lineup__header__item lineup__item--name cell small-9"}
        >
          Name
        </span>
        <span
          className={"lineup__header__item lineup__item--time cell small-1"}
        >
          <Icon icon="fa-clock-o" />
        </span>
      </div>
    )
  }

  renderSubLine(i, element) {
    return (
      <div
        className={"lineup__row lineup__row--substitute grid-x grid-margin-x"}
        key={i}
      >
        <span
          className={"lineup__row__item lineup__item--status cell small-1"}
          style={{
            backgroundImage: `url(${element.changed ? iconSubIn : iconBench})`,
          }}
        ></span>
        <span className={"lineup__row__item lineup__item--number cell small-1"}>
          {element.number}
        </span>
        <span className={"lineup__row__item lineup__item--name cell small-9"}>
          {element.playerName}
        </span>
        <span className={"lineup__row__item lineup__item--time cell small-1"}>
          {element.minutesPlayed}'
        </span>
      </div>
    )
  }

  renderLineupLine(i, element) {
    return (
      <div
        className={"lineup__row lineup__row--lineup grid-x grid-margin-x"}
        key={i}
      >
        <span
          className={"lineup__row__item lineup__item--status cell small-1"}
          style={{
            backgroundImage: `url(${element.changed ? iconSubOut : iconStart})`,
          }}
        ></span>
        <span className={"lineup__row__item lineup__item--number cell small-1"}>
          {element.number}
        </span>
        <span className={"lineup__row__item lineup__item--name cell small-9"}>
          {element.playerName} {element.captain && `(C)`}
        </span>
        <span className={"lineup__row__item lineup__item--time cell small-1"}>
          {element.minutesPlayed}'
        </span>
      </div>
    )
  }
}

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        siteUrl
        kcvvPsdApi
        refreshRate
      }
    }
  }
`

export default GamePage


1			import React, { Component } from "react"
2			import LazyLoad from "react-lazy-load"
3
4			import { graphql } from "gatsby"
5
6			import moment from "moment"
7			import "moment/locale/nl-be"
8
9			import { mapPsdStatus } from "../scripts/helper"
10
11			import Layout from "../layouts/index"
12			import SEO from "../components/seo"
13			import Icon from "../components/icon"
14
15			import iconBench from "../images/i_bench_2.png"
16			import iconCardRed from "../images/i_card_red.png"
17			import iconCardYellowRed from "../images/i_card_yellow_red.png"
18			import iconCardYellow from "../images/i_card_yellow.png"
19			import iconGoal from "../images/i_goal.png"
20			import iconStart from "../images/i_start.png"
21			import iconSubIn from "../images/i_sub_in.png"
22			import iconSubOut from "../images/i_sub_out.png"
23
24			class GamePage extends Component {
25			constructor(props) {
26			super(props)
27
28			this.state = {
29			data: [],
30			loading: true,
31			}
32
33			const {
34			data: {
35			site: {
36			siteMetadata: { kcvvPsdApi, refreshRate },
37			},
38			},
39			} = this.props
40
41			this.kcvvPsdApi = kcvvPsdApi
42			this.apiRefreshRate = refreshRate
43			this.timeout = {}
44			this.matchId = this.props.id \|\| null
45			}
46
47			updateData() {
48			const apiUrl = `${this.kcvvPsdApi}/match/${this.matchId}`
49
50			fetch(apiUrl)
51			.then((response) => response.json())
52			.then((json) => this.setState({ data: json, loading: false }))
53			}
54
55			componentDidMount() {
56			this.updateData()
57			}
58
59			render() {
60			moment.locale("nl-be")
61
62			if (this.state.loading === false && this.state.data) {
63			const {
64			general = {},
65			substitutes = {},
66			lineup = {},
67			events = [],
68			} = this.state.data
69			const homeTeamId = general.homeClub.id
70			const ogImage = {
71			src: general?.homeClub.logo,
72			width: 180,
73			height: 180,
74			}
75
76			const { home: homeLineup = [], away: awayLineup = [] } = lineup \|\| {}
77			const { home: homeSubs = [], away: awaySubs = [] } = substitutes \|\| {}
78
79			const matchTime = moment(general.date)
80
81			return (
82			<Layout>
83			<SEO
84			lang="nl-BE"
85			title={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
86			description={`Matchverslag ${general?.homeClub?.name} - ${general?.awayClub?.name}`}
87			path={`/game/${general?.id}`}
88			image={ogImage}
89			/>
90			{/* <header className="full">
91			<div className={"bg-green-mask bg-green-mask--minimal"}>
92			<div className={"bg-white-end"} />
93			</div>
94			</header> */}
95
96			<section className="grid-container game-stats">
97			<div className="grid-x grid-margin-x">
98			<div className={"cell large-12 center game__details"}>
99			<div className="game__teams">
100			<div className={"game__teams-inner"}>
101			<LazyLoad debounce={false}>
102			<img
103			src={general.homeClub.logo}
104			alt={general.homeClub.name}
105			/>
106			</LazyLoad>
107			</div>
108			{this.renderScore(general.goalsHomeTeam, general.goalsAwayTeam)}
109			<div className={"game__teams-inner"}>
110			<LazyLoad debounce={false}>
111			<img
112			src={general.awayClub.logo}
113			alt={general.awayClub.name}
114			/>
115			</LazyLoad>
116			</div>
117			</div>
118			<h1>{`${general.homeClub.name} - ${general.awayClub.name}`}</h1>
119			<h4>{general.competitionType}</h4>
120			<time dateTime={matchTime.format("YYYY-MM-DD - H:mm")}>
121			{matchTime.format("dddd DD MMMM YYYY - H:mm")}
122			</time>
123			<br />
124			{general.status !== 0 && mapPsdStatus(general.status)}
125			<br />
126			</div>
127
128			{(homeLineup.length !== 0 \|\| awayLineup.length !== 0) && (
129			<div
130			className={
131			"lineup__wrapper grid-x grid-margin-x cell large-12"
132			}
133			>
134			<div className={"cell large-6 lineup__wrapper--home"}>
135			<h3>{general.homeClub.name}</h3>
136			{homeLineup && this.renderLineup(homeLineup, homeSubs)}
137			</div>
138			<div className={"cell large-6 lineup__wrapper--away"}>
139			<h3>{general.awayClub.name}</h3>
140			{awayLineup && this.renderLineup(awayLineup, awaySubs)}
141			</div>
142			</div>
143			)}
144
145			{events.length !== 0 && (
146			<div className={"cell large-12 event__wrapper"}>
147			<h3>Gebeurtenissen</h3>
148			{events && this.renderEvents(events, homeTeamId)}
149			</div>
150			)}
151			</div>
152			</section>
153			</Layout>
154			)
155			} else {
156			return (
157			<Layout>
158			<section className="grid-container site-content">
159			Matchverslag inladen...
160			</section>
161			</Layout>
162			)
163			}
164			}
165
166			renderScore = (resultHome, resultAway) => {
167			return resultHome !== null && resultAway !== null ? (
168			<div className={"match-details__vs match-details__vs--score"}>
169			{this.renderScoreWithWinnerIndicator(resultHome, resultAway, "home")}
170			<span className={"match-details__divider"}> - </span>
171			{this.renderScoreWithWinnerIndicator(resultAway, resultHome, "away")}
172			</div>
173			) : (
174			<div className={"match-details__vs"}>VS</div>
175			)
176			}
177
178			renderScoreWithWinnerIndicator = (result1, result2, extraClass) => {
179			return result1 > result2 ? (
180			<span
181			className={`match-details__winner match-details__winner--${extraClass}`}
182			>
183			{result1}
184			</span>
185			) : (
186			<span className={"match-details__loser"}>{result1}</span>
187			)
188			}
189
190			renderEvents(events, homeTeamId) {
191			return (
192			<>
193			{events.map((element, i) =>
194			this.renderEventLine(i, element, homeTeamId)
195			)}
196			</>
197			)
198			}
199
200			renderEventLine(i, element, homeTeamId) {
201			const homeTeam = element.clubId == homeTeamId
202			let actionIcon = null
203			let actionText = ""
204
205			switch (element.action) {
206			case "geel":
207			actionIcon = iconCardYellow
208			actionText = "Gele kaart voor"
209			break
210			case "rood":
211			actionIcon = iconCardRed
212			actionText = "Rode kaart voor"
213			break
214			case "tweedegeel":
215			actionIcon = iconCardYellowRed
216			actionText = "Tweede gele kaart voor"
217			break
218			case "doelpunt":
219			actionIcon = iconGoal
220			actionText = `${element?.goalsHome} - ${element?.goalsAway} — Doelpunt gescoord door`
221			break
222			}
223
224			return (
225			<div
226			className={`event__row ${
227			homeTeam ? "event__row--home" : "event__row--away"
228			} grid-x grid-margin-x`}
229			key={i}
230			>
231			{homeTeam && (
232			<span
233			className={
234			"event__row__item event__row__item--home lineup__item--name cell small-10 large-4"
235			}
236			>
237			{actionText} {element.playerName}
238			</span>
239			)}
240			{homeTeam && (
241			<span
242			className={
243			"event__row__item event__row__item--home lineup__item--action cell small-1 center"
244			}
245			style={{ backgroundImage: `url(${actionIcon})` }}
246			></span>
247			)}
248			<span
249			className={
250			"event__row__item lineup__item--time cell small-1 large-2 center"
251			}
252			>
253			{element.minute}'
254			</span>
255			{homeTeam \|\| (
256			<span
257			className={
258			"event__row__item event__row__item--away lineup__item--action cell small-1 center"
259			}
260			style={{ backgroundImage: `url(${actionIcon})` }}
261			></span>
262			)}
263			{homeTeam \|\| (
264			<span
265			className={
266			"event__row__item event__row__item--away lineup__item--name cell small-10 large-4"
267			}
268			>
269			{actionText} {element.playerName}
270			</span>
271			)}
272			</div>
273			)
274			}
275			renderLineup(lineup, substitutes) {
276			return (
277			<>
278			{this.renderLineupHeader()}
279			{lineup.map((element, i) => this.renderLineupLine(i, element))}
280			<hr />
281			{substitutes.map((element, i) => this.renderSubLine(i, element))}
282			</>
283			)
284			}
285
286			renderLineupHeader() {
287			return (
288			<div className={"lineup__header grid-x grid-margin-x"}>
289			<span
290			className={"lineup__header__item lineup__item--status cell small-1"}
291			></span>
292			<span
293			className={"lineup__header__item lineup__item--number cell small-1"}
294			>
295			#
296			</span>
297			<span
298			className={"lineup__header__item lineup__item--name cell small-9"}
299			>
300			Name
301			</span>
302			<span
303			className={"lineup__header__item lineup__item--time cell small-1"}
304			>
305			<Icon icon="fa-clock-o" />
306			</span>
307			</div>
308			)
309			}
310
311			renderSubLine(i, element) {
312			return (
313			<div
314			className={"lineup__row lineup__row--substitute grid-x grid-margin-x"}
315			key={i}
316			>
317			<span
318			className={"lineup__row__item lineup__item--status cell small-1"}
319			style={{
320			backgroundImage: `url(${element.changed ? iconSubIn : iconBench})`,
321			}}
322			></span>
323			<span className={"lineup__row__item lineup__item--number cell small-1"}>
324			{element.number}
325			</span>
326			<span className={"lineup__row__item lineup__item--name cell small-9"}>
327			{element.playerName}
328			</span>
329			<span className={"lineup__row__item lineup__item--time cell small-1"}>
330			{element.minutesPlayed}'
331			</span>
332			</div>
333			)
334			}
335
336			renderLineupLine(i, element) {
337			return (
338			<div
339			className={"lineup__row lineup__row--lineup grid-x grid-margin-x"}
340			key={i}
341			>
342			<span
343			className={"lineup__row__item lineup__item--status cell small-1"}
344			style={{
345			backgroundImage: `url(${element.changed ? iconSubOut : iconStart})`,
346			}}
347			></span>
348			<span className={"lineup__row__item lineup__item--number cell small-1"}>
349			{element.number}
350			</span>
351			<span className={"lineup__row__item lineup__item--name cell small-9"}>
352			{element.playerName} {element.captain && `(C)`}
353			</span>
354			<span className={"lineup__row__item lineup__item--time cell small-1"}>
355			{element.minutesPlayed}'
356			</span>
357			</div>
358			)
359			}
360			}
361
362			export const pageQuery = graphql`
363			query {
364			site {
365			siteMetadata {
366			siteUrl
367			kcvvPsdApi
368			refreshRate
369			}
370			}
371			}
372			`
373
374			export default GamePage
375

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/game-reports ( 4b0bd0...63548e )

GamePage A

Complexity

Size/Duplication

Importance

Duplication Side-by-Side

Filter issues like